<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      title="发布房源"
      @click-left="$router.push('/rent')"
    ></van-nav-bar>
    <van-form class="form">
      <van-field label-class="titleColor" label="房源信息" disabled />
      <van-field readonly clickable v-model="formData.community" label="小区名称" @click="houseName">
        <template #extra v-if="!formData.community">
          请输入小区名称 >
        </template>
      </van-field>
      <van-field v-model="formData.price" label="租金" placeholder="请输入租金/月">
        <template #extra>
          ￥/月
        </template></van-field
      >
      <van-field v-model="formData.size" label="建筑面积" placeholder="请输入建筑面积">
        <template #extra> m<sup>2</sup> </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="picker"
        :value="formData.roomType"
        label="户型"
        @click="(showPicker = true), (index = 'roomType')"
      >
        <template #extra v-if="!formData.roomType">
          请选择 >
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="picker"
        :value="formData.floor"
        label="所在楼层"
        @click="(showPicker = true), (index = 'floor')"
        ><template #extra v-if="!formData.floor">
          请选择 >
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="picker"
        :value="formData.oriented"
        label="朝向"
        @click="(showPicker = true), (index = 'oriented')"
        ><template #extra v-if="!formData.oriented">
          请选择 >
        </template>
      </van-field>
      <van-field label-class="houseColor" label="房屋标题" disabled />
      <van-field
        v-model="formData.title"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
      />
      <van-field label-class="houseColor" label="房屋图像" disabled />
      <!-- <van-field name="uploader">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field> -->
      <van-uploader camera   v-model="fileList" multiple  />
      <van-field label-class="houseColor" label="房屋配置" disabled />
      <!-- 宫格导航 -->
      <van-grid :column-num="5" class="grid-nav mb-9">
        <van-grid-item
         class="grid-item"
          @click="onClick(index)"
          v-for="(value, index) in texts"
          :key="index"
          :text="value"
          :class="{'titleColor': fondIndex.indexOf(index)>-1 } "
        > 
        <i slot="icon"
               class="iconfont"
               :class="supportingIcon[index]"></i>
         </van-grid-item>
      </van-grid>
      <!-- /宫格导航 -->
      <van-field label-class="houseColor" label="房屋描述" disabled />
      <van-field
        v-model="formData.description"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入房屋描述信息"
        show-word-limit
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          value-key="label"
          :columns="columns[index]"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </van-form>
    <van-row type="flex" justify="space-around" class="btn">
      <van-col span="12"
        ><van-button type="default" size="large" @click="Cancel" native-type="button">取消</van-button></van-col
      >
      <van-col span="12"
        ><van-button type="primary" size="large" @click="onSubmit">提交</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {pubHouses} from '@/api/user'
// import {postHouseImg} from '@/api/house'
import {uploadHouseImage} from '@/api/plugin'
import {getHousesParams} from '@/api/house'
export default {
  name: "Add",
  data() {
    return {
      index: "",
      // community: "",
      // price: "",
      // size: "",
      // roomType: "",
      // floor: "",
      // oriented: "",
      // title: "",
      // description: "",
      // uploader: [],
       fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      columns: {},
      showPicker: false,
      fondIndex:[],
      show:false,
      texts:['衣柜','洗衣机','空调','天然气','冰箱','暖气','电视','热水器','宽带','沙发'],
      formData:{
         title: "",
         description: "",
         houseImg: "",
         oriented: "",
         supporting: "",
         price: "",
         roomType: "",
         size: "",
         floor: "",
         community: this.$route.query.communityName||""
      },
      supportingIcon:{
        '0': 'icon-wardrobe',
        '1': 'icon-wash',
        '2': 'icon-air',
        '3': 'icon-gas',
        '4': 'icon-ref',
        '5': 'icon-Heat',
        '6': 'icon-vid',
        '7': 'icon-heater',
        '8': 'icon-broadband',
        '9':'icon-sofa ',
      },
    };
  },
  methods: {
   async onRead(file) {
      //  console.log(this.fileList);
      //  let fd=new FormData()
// console.log(file);
// var  arrList =  this.fileList.map(img=>img.file )
// console.log(arrList);
    //  fd.append('file',file.file)
    // .forEach(item=>{
    //   console.log(item);
    //   fd.append('file',item)
    //   console.log(fd);
    // })
    
  //  await uploadHouseImage({ name:fd,filename:"head.jpg" })
    },
    onConfirm(value) {
      if (this.index === 'roomType') {
        this.formData.roomType = value.label;
      } else if (this.index === 'floor') {
        this.formData.floor = value.label;
      } else {
        this.formData.oriented = value.label;
      }
      this.showPicker = false;
    },
    onClick(index) {
      console.log(index);
      
     let arrIndex = this.fondIndex.indexOf(index);
      // console.log(arrIndex);
      if(arrIndex>-1){
          this.fondIndex.splice(arrIndex,1);
      }else{
          this.fondIndex.push(index);
      }
    },
    Cancel() {
      this.$dialog.confirm({
      title: '确认取消吗？',
})
  .then(() => {
    this.$router.back()
  })
  .catch(() => {
    // on cancel
  });
    },
   async onSubmit() {
    // .forEach(val=>{
     let fd =  new FormData()
     this.fileList.forEach(val=>{
       fd.append('file',val.file)
     })
     const {body} = await  uploadHouseImage(fd)
     console.log(body);
     this.formData.houseImg = body.join('|')
     this.formData.supporting=this.fondIndex
      .map(index=>this.texts[index])
      .join('|')
     this.formData.floor=this.formData.floor?this.columns.floor.find(item=>item.label===this.formData.floor).value:''
     this.formData.oriented=this.formData.oriented?this.columns.oriented.find(item=>item.label===this.formData.oriented).value:''
     this.formData.roomType=this.formData.roomType?this.columns.roomType.find(item=>item.label===this.formData.roomType).value:''
     console.log(this.$route.query.community);
     this.formData.community = this.$route.query.community
     console.log(this.formData);
     console.log(this.formData.houseImg);
    // this.formData.houseImg = this.uploader[0].content
    // console.log(this.formData.houseImg);
    // console.log(this.formData.supporting);
    // await postHouseImg()//上传头像请求
    
    // await uploadHouseImage()//上传头像请求
    const res =  await pubHouses(this.formData)
    // this.$parent.isNull = true
    //  this.$parent.onLoad()
    this.$router.push('/rent')
    // await getPubHouses()
    console.log(res);
    },
    // 获取发布房源所需条件
    async getHousesParams(){
      const {body}=await getHousesParams()
      this.columns=body
    },
    houseName(){
      this.$router.push('/add/search')
    }
  },
  mounted() {
    window.scrollTo(0,0)
    this.getHousesParams()
  }
};
</script>

<style scoped lang="less">
/deep/.titleColor {
  color: #21b97a;
}
/deep/.houseColor {
  color: black;
}
.grid-nav {
  width: 100%;
  .changCol {
    color: #eb5253;
  }
  .grid-item {
    height: 141px;
    .iconfont {
      font-size: 45px;
    }
    .toutiao-shoucang {
      color: #eb5253;
    }
    .toutiao-lishi {
      color: #ff9d1d;
    }
    span.text {
      font-size: 28px;
    }
  }
}
.mb-9 {
  margin-bottom: 9px;
}
.btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.form {
  margin-bottom: 100px;
}
</style>
